<template>
  <view class="about-layout">
    <my-header title="关于我们"></my-header>
    <my-content class="content">
      <view class="logo_name">
        <image :src="settingData.logo" class="logo"></image>
        <view class="name">{{ settingData.name }}</view>
      </view>

      <view class="setting">
        <view class="setting_item" @click="checkVersion()">
          <view class="setting_item_left">
            <view>检查更新</view>
            <view class="new_version" v-if="versionData.status == 1">new</view>
            <!-- <view class="old_version" v-else>当前已是最新版本</view> -->
          </view>
          <image src="https://www.dingxians.cn/images/common/arrow-right.png" class="right"></image>
        </view>
        <view class="setting_item" @click="header('/packageB/content/feedback')">
          <view>问题反馈</view>
          <image src="https://www.dingxians.cn/images/common/arrow-right.png" class="right"></image>
        </view>
        <view class="setting_item" @click="header('/packageB/content/user')">
          <view>用户协议</view>
          <image src="https://www.dingxians.cn/images/common/arrow-right.png" class="right"></image>
        </view>
        <view class="setting_item" @click="header('/packageB/content/privacy')">
          <view>隐私政策</view>
          <image src="https://www.dingxians.cn/images/common/arrow-right.png" class="right"></image>
        </view>
        <!-- 	<view class="setting_item">
				<view>平台资质</view>
				<image src="https://www.dingxians.cn/images/user/right.png" class="right"></image>
			</view> -->
      </view>


      <uni-popup class="popup" v-show="showVersion" mode="center" ref="pop" :mask-click="mask">
        <view class="pop_box">
          <image class="pop_bg" mode="widthFix" src="http://www.qixdian.cn/upload/20230830/64eeb4f594a71.png"></image>
          <view class="pop_version">
            <view class="pop_header">发现新版本</view>
            <text class="pop_content">{{ versionData.content }}</text>
          </view>
          <view class="rate" v-if="downStatus">
            <view class="rate_image">
              <liu-progressbar
                :bgColor="'#A361F6'"
                :progress="percentVal"
                dsColor="#ccc"
                color="#FFFFFF"
                :height="'15rpx'"
              />
            </view>
            <view class="rate_value">{{ percentVal }}%</view>
          </view>
          <view class="down_btn_group" v-else>
            <view class="down_btn cancel" @click="cancel()">取消</view>
            <view class="down_btn down" @click="updateApp()">更新</view>
          </view>
        </view>
      </uni-popup>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      settingData: {},
      version_no: '',
      showVersion: false,
      percentVal: 0,
      versionData: {},
      mask: true,
      downStatus: false,
      type: '',
    }
  },
  onLoad(option) {
  },
  onShow() {
    this.getSetting()
    this.percentVal = 0
    this.showVersion = false
    this.mask = true
    this.downStatus = false

    // #ifdef APP-PLUS
    this.getVersion()
    // #endif
  },

  methods: {
    getSetting() {
      api.settings
        .show()
        .then((res) => {
          if (res.code === 200) {
            this.settingData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getVersion() {
      plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
        this.version_no = wgtinfo.version

        let ua = uni.getSystemInfoSync().platform
        if (/ios/i.test(ua)) {
          this.type = 'ios'
        } else if (/android/i.test(ua)) {
          this.type = 'android'
        }
        uni.showLoading({
          title: '检查更新中',
        })
        api.versions
          .check({ refresh: 0, type: this.type, version_no: this.version_no })
          .then((res) => {
            uni.hideLoading()
            if (res.code === 200) {
              this.versionData = res.data
            }
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    cancel() {
      this.$refs.pop.close()
      this.show = false
    },
    updateApp() {
      this.downStatus = true
      this.mask = false
      if (this.type == 'android') {
        this.androidUpdate()
      } else {
        this.iosUpdate()
      }
    },
    androidUpdate() {
      let file_size = this.versionData.file_size

      var dtask = plus.downloader.createDownload(this.versionData.url, {}, function(d, status) {
        // 下载完成
        if (status == 200) {
          plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(error) {
            this.show('安装成功')
          })
        } else {
          this.show('安装失败')
        }
      })
      dtask.start()

      let timer = setInterval(() => {
        let percent = (dtask.downloadedSize / file_size).toFixed(2) // fileSize文件总大小，后端返回的
        this.percentVal = Math.floor(percent * 100) // 转成整数展示
        if (percent >= 1) {
          // 注意百分比，及时清除定时器即可
          clearInterval(timer)
          this.showVersion = false
          this.$refs.pop.close()
        }
      }, 18)
    },
    iosUpdate() {
      plus.runtime.launchApplication(
        {
          action: `${this.versionData.url}`,
        },
        function(e) {
          console.log('Open system default browser failed: ' + e.message)
        },
      )
    },
    checkVersion() {
      if (this.versionData.status == 0) {
        this.show('当前已是最新版本')
      } else {
        this.showVersion = true
        this.$refs.pop.open('center')
      }
    },
  },
}
</script>

<style lang="scss">
.about-layout {
  height: 100vh;
  background-color: #171717;
}

.content {

  // background: linear-gradient(to bottom, #d6c8fa, #f7f7f7);
  .logo_name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;

    .logo {
      width: 132rpx;
      height: 132rpx;
      margin: 80rpx 0 28rpx 0;
      border-radius: 20rpx;
    }

    .name {
      font-size: 36rpx;
      color: white;
      font-weight: bold;
    }
  }

  .setting {
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
    color: white;

    .setting_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 110rpx;
      line-height: 110rpx;
      padding: 0 30rpx;
      margin: 0 auto;
      width: 670rpx;
      // background-color: #fff;
      .setting_item_left {
        display: flex;
        align-items: center;

        .new_version {
          margin-left: 10rpx;
          background-color: red;
          border-radius: 20rpx;
          width: 60rpx;
          text-align: center;
          height: 30rpx;
          line-height: 30rpx;
          font-size: 24rpx;
          color: #fff;
        }
      }

      .right {
        width: 22rpx;
        height: 22rpx;
      }
    }
  }

  .version {
    text-align: center;
    margin-top: 20rpx;
    color: #DEDEDE;
  }

  .popup {
    .pop_box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // background-color: #fff;
      width: 600rpx;
      height: 600rpx;
      border-radius: 10rpx;
      // padding: 20rpx 0;
      position: relative;

      .pop_bg {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
      }

      .pop_version {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 100rpx;
        margin-left: 60rpx;

        .pop_header {
          color: #fff;
        }

        .pop_content {
          // padding: 0 20rpx;
          margin-top: 120rpx;
        }
      }

      .rate {
        width: 550rpx;
        margin: 0 auto;
        align-items: center;
        display: flex;

        .rate_image {
          width: 500rpx;
          margin-right: 10rpx;
        }
      }

      .down_btn_group {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .down_btn {
          width: 200rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          font-size: 24rpx;
          border-radius: 10rpx;

          &.cancel {
            background-color: #ccc;
            color: #999;
          }

          &.down {
            background-color: #a361f6;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
